<template>
  <div>
      <ul class="foot_list">
          <li v-for="(item,index) in nav" :key="index"  @click="routerLink(index, item.path)">
            <div  :key="index"  :class=" navIndex === index ? item.class2 : item.path_name"></div>
            <span  :class=" navIndex === index ? 'active' : '' ">{{item.name}}</span>
          </li>
      </ul>
  </div>
</template>
<script>
     export default {
          name: 'Base',
          data () {
               return {
                 nav: [
                   {name: '首页', path_name: 'go_home',class2:'go_home_on', path: '/'},
                   {name: '选购', path_name: 'go_choose',class2:'go_choose_on', path: '/choose'},
                   {name: '我的', path_name: 'go_my',class2:'go_my_on', path: '/center'},
                  ],
                  navIndex: 0,
               }
          },
          
          methods:{
              routerLink(index, path) {
               this.navIndex = index;
               this.$router.push(path)
              },
              changeRouter:function(){
                  var cur_router = this.$route.path;
                   if(cur_router.match(/choose/i)){
                        this.navIndex = 1;
                    }else if(cur_router.match(/center/i)){
                      this.navIndex = 2;
                    }else{
                       this.navIndex = 0;
                    }
              },
          },
          mounted(){
              this.changeRouter();
          },
          watch: {   // 监听路由
              $route(to, from) {
                  this.changeRouter();
              }
          },
     }
</script>
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  margin:0;
}
a {
  color: #000;
  text-decoration:none;
}
.foot_list{width:100%;height:98px;font-size:20px;position:fixed;bottom:0px;left:0px;padding:0px 2%;background:#fff;z-index:99999;}
.foot_list li{float:left;width:33%;height:98px;text-align:center;}
.go_home{background:url(/static/images/home.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_choose{background:url(/static/images/choose.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_trademarke{background:url(/static/images/trademarke.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_my{background:url(/static/images/my.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_home_on{background:url(/static/images/homeed.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_choose_on{background:url(/static/images/chooseed.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_trademarke_on{background:url(/static/images/trademarkeed.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.go_my_on{background:url(/static/images/myed.png)no-repeat 50%;background-size: 100% 100%;width:52px;height:52px;margin:0 auto;}
.foot_list li div{margin-bottom:5px;margin-top:4px;}
.foot_list li span{color:#9B9B9B;}
.foot_list li span.active{color:#333334;}
</style>
